<template>
    <div>
        <el-form ref="addForm" :model="formData" :rules="rules" label-width="120px">
            <el-form-item label="姓名" prop="username">
                <el-input v-model="formData.username" style="width:50%" placeholder="请输入姓名" />
            </el-form-item>
            <el-form-item label="手机" prop="mobile">
                <el-input v-model="formData.mobile" style="width:50%" placeholder="请输入手机号" />
            </el-form-item>
            <el-form-item label="入职时间" prop="timeOfEntry">
                <el-date-picker v-model="formData.timeOfEntry" style="width:50%" placeholder="请选择入职时间" />
            </el-form-item>
            <el-form-item label="聘用形式" prop="formOfEmployment">
                <el-select v-model="formData.formOfEmployment" style="width:50%" placeholder="请选择">
                    <el-option v-for="item in hireType" :label="item.value" :value="item.id" :key="item.id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="工号" prop="workNumber">
                <el-input v-model="formData.workNumber" style="width:50%" placeholder="请输入工号" />
            </el-form-item>
            <el-form-item label="部门" prop="departmentName">
                <el-input v-model="formData.departmentName" style="width:50%" placeholder="请选择部门"
                    @focus="loadDepartments()" />
                <el-tree v-if="departmentsList.length > 0" default-expand-all :data="departmentsList"
                    :props="defaultProps" @node-click="hNodeClick"></el-tree>
            </el-form-item>
            <el-form-item label="转正时间" prop="correctionTime">
                <el-date-picker v-model="formData.correctionTime" style="width:50%" placeholder="请选择转正时间" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="hSubmit">确定</el-button>
                <el-button type="" @click="$emit('close')">取消</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import { getDepartmentList } from '@/api/departments'
import { addEmployees } from '@/api/employees'
import empConst from '@/constant/employees'
import { tranListToTreeData } from '@/utils'
export default {
    data() {
        return {
            formData: {
                username: '',         // 用户名
                mobile: '',           // 手机号
                formOfEmployment: '', // 聘用形式
                workNumber: '',       // 工号
                departmentName: '',   // 部门
                timeOfEntry: '',      // 入职时间
                correctionTime: ''    // 转正时间
            },
            hireType: empConst.hireType,
            rules: {
                username: [
                    { required: true, message: '用户姓名不能为空', trigger: 'blur' },
                    { min: 1, max: 4, message: '用户姓名为1-4位', trigger: 'blur' }
                ],
                mobile: [
                    { required: true, message: '手机号不能为空', trigger: 'blur' },
                    { pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确', trigger: 'blur' }
                ],
                formOfEmployment: [
                    { required: true, message: '聘用形式不能为空', trigger: 'blur' }
                ],
                workNumber: [
                    { required: true, message: '工号不能为空', trigger: 'blur' }
                ],
                departmentName: [
                    { required: true, message: '部门不能为空', trigger: 'change' }
                ],
                timeOfEntry: [
                    { required: true, message: '请选择入职时间', trigger: 'blur' }
                ]
            },
            departmentsList: [],
            defaultProps: {
                label: 'name',
                children: 'children'
            },
            showTree: false
        }
    },

    created() {
        // this.loadDepartments()
    },
    methods: {
        async hSubmit() {
            try {
                const valid = await this.$refs.addForm.validate().catch(e => e)
                if (!valid) return
                const res = await addEmployees(this.formData)
                console.log(res);
                this.$message.success(res.message)
                this.$emit('success')

            } catch (error) {
                this.$message.error(error.message)
            }

        },
        async loadDepartments() {
            try {
                const res = await getDepartmentList()
                res.data.depts.shift()
                this.departmentsList = tranListToTreeData(res.data.depts)
                console.log(this.departmentsList);

            } catch (error) {
                console.log(error);
            }

        },
        hNodeClick(node) {
            console.log(node);
            if (node.children.length) return
            this.formData.departmentName = node.name
            this.departmentsList = ''
        },
        resetForm() {
            // console.log('reset');
            this.formData = {
                username: '',         // 用户名
                mobile: '',           // 手机号
                formOfEmployment: '', // 聘用形式
                workNumber: '',       // 工号
                departmentName: '',   // 部门
                timeOfEntry: '',      // 入职时间
                correctionTime: ''    // 转正时间
            }
            this.$nextTick(() => {

                this.$refs.addForm.clearValidate()
            })

        },

    }
}

// 1.深拷贝浅拷贝parseint
// 2.使用showtree
</script>

<style scoped lang='scss'></style>